<template>
  <TemplateTitle
    titleName="全年完成情况"
    style="margin-bottom: 25rem"
  ></TemplateTitle>
  <div class="type-box">
    <div class="type-item">
      <div class="name">
        <span></span>
        <p>全年目标水量(水务)</p>
      </div>
      <div class="numb">
        <span>{{ dataObj.targetYear }}</span> 万吨
      </div>
    </div>
    <div class="type-item">
      <div class="name">
        <span></span>
        <p>已完成水量</p>
      </div>
      <div class="numb">
        <span>{{ dataObj.completeOfYear }}</span> 万吨
      </div>
    </div>
  </div>
  <div class="type-box">
    <div class="type-item">
      <div class="name">
        <span></span>
        <p>目标日均水量(水务)</p>
      </div>
      <div class="numb">
        <span>{{ dataObj.targetOfDailyAvg }}</span> 万吨
      </div>
    </div>
    <div class="type-item">
      <div class="name">
        <span></span>
        <p>实际日均水量</p>
      </div>
      <div class="numb">
        <span>{{ dataObj.dailyAvgOfYear }}</span> 万吨
      </div>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/TemplateTitle.vue";
import homeHttp from "@/https/home.js";
import { onMounted, ref, watch, inject } from "vue";
import moment from "moment";

let dataObj = ref({});

onMounted(() => {
  queryAchievedOfYear(moment().format("YYYY"));
});

const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryAchievedOfYear(val);
});
const queryAchievedOfYear = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryAchievedOfYear(params).then((res) => {
    if (res.data.code == 200) {
      dataObj.value = res.data.data;
    }
  });
};
</script>

<style scoped lang="less">
.type-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .type-item {
    width: 166rem;
    background: url("../../assets/images/typeItemBg.png") no-repeat right bottom;
    background-size: 150rem 15rem;
    margin-bottom: 30rem;

    .name {
      padding-left: 3px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #7190b6;
      font-size: 12rem;
      margin-bottom: 10rem;

      span {
        display: inline;
        width: 6rem;
        height: 6rem;
        background-color: #369eff;
        margin-right: 8rem;
      }
    }

    .numb {
      line-height: 32rem;
      color: #369eff;
      font-weight: bold;
      font-size: 16rem;
      padding-left: 16rem;

      span {
        font-size: 24rem;
      }
    }
  }
}
</style>
